<template>
  <div class="user-info-container">
    <!-- 用户基本信息 -->
    <div class="user-basic-info">
      <div class="user-header">
        <h2>用户信息</h2>
      </div>
      <div class="user-details">
        <div class="detail-item">
          <span class="label">用户名：</span>
          <span class="value">李四</span>
        </div>
        <div class="detail-item">
          <span class="label">用户ID：</span>
          <span class="value">123456789</span>
        </div>
      </div>
    </div>

    <!-- 设备绑定管理 -->
    <div class="device-management">
      <div class="header">
        <h2>品牌设备绑定管理</h2>
        <p>当前已连接设备：{{ totalDevices }}台</p>
      </div>

      <!-- 美的设备 -->
      <el-card class="device-card">
        <div class="brand-header">
          <img src="~@/assets/brands/midea.png" class="brand-logo"/>
          <h3>美的品牌设备</h3>
        </div>
        <div class="device-status">
          <span>绑定状态：{{ mideaStatus }}</span>
          <el-button 
            :type="mideaStatus === '未绑定' ? 'primary' : 'danger'"
            @click="handleDeviceAction('midea')">
            {{ mideaStatus === '未绑定' ? '立即绑定' : '解除绑定' }}
          </el-button>
        </div>
      </el-card>

      <!-- 小米设备 -->
      <el-card class="device-card">
        <div class="brand-header">
          <img src="~@/assets/brands/xiaomi.png" class="brand-logo"/>
          <h3>小米品牌设备</h3>
        </div>
        <div class="device-status">
          <span>绑定状态：{{ xiaomiStatus }}</span>
          <el-button
            :type="xiaomiStatus === '未绑定' ? 'primary' : 'danger'"
            @click="handleDeviceAction('xiaomi')">
            {{ xiaomiStatus === '未绑定' ? '立即绑定' : '解除绑定' }}
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  data() {
    return {
      mideaStatus: '未绑定',
      xiaomiStatus: '已绑定',
      totalDevices: 1
    }
  },
  methods: {
    handleDeviceAction(brand) {
      const isBind = this[`${brand}Status`] === '未绑定'
      const actionText = isBind ? '绑定' : '解绑'
      
      ElMessageBox.confirm(
        `确定要${actionText}${brand}设备吗？`,
        `${actionText}确认`, 
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }
      ).then(() => {
        this[`${brand}Status`] = isBind ? '已绑定' : '未绑定'
        this.totalDevices = isBind ? this.totalDevices + 1 : this.totalDevices - 1
        ElMessage.success(`${brand}设备${actionText}成功`)
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.user-info-container {
  padding: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.user-basic-info {
  margin-bottom: 40px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.user-header h2 {
  color: #303133;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.user-details {
  display: grid;
  gap: 15px;
}

.detail-item {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.label {
  color: #606266;
  min-width: 80px;
}

.value {
  color: #303133;
  font-weight: 500;
}

.device-management {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.device-card {
  margin: 20px 0;
}

.brand-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.brand-logo {
  width: 60px;
  height: 40px;
  margin-right: 15px;
}

.device-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.el-button {
  min-width: 100px;
}
</style>